<template>
  <div class="rank-index">
    <div class="rank-index-navbar">
      <div class="home-navbar">
        <a v-for="(item,index) in menus" :key="index" :class="'home-navbar-item '+(item.path === path?'active':'')"
           @click="selTab(item)">{{ item.name }}</a>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "RescueView",
  data() {
    return {
      path: '/rescue',
      menus: [
        {name: '求助贴', path: '/rescue'},
        {name: '今日救助流浪动物', path: '/rescue/achievement'},
      ]
    };
  },
  created() {
    this.$router.push('/rescue');
  },
  methods: {
    selTab(item) {
      this.path = item.path;
      this.$router.push({path: item.path});
    },
  }
}
</script>

<style scoped>

.rank-index {
  width: 1200px;
  margin: 0 auto;
}

.rank-index .rank-index-navbar {
 background-color: rgba(243, 198, 198, 0.93);
  height: 48px;
  margin: 12px auto;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.home-navbar {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.home-navbar .home-navbar-item:not(:last-child) {
  padding-right: 48px;
}
.home-navbar .home-navbar-item {
  display: block;
  font-size: 16px;
  color: #252526;
  cursor: pointer;
  -webkit-transition: color .12s linear;
  transition: color .12s linear;
  line-height: 1.5;
}
a {
  text-decoration: none;
  color: #366cd9;
}
.home-navbar .home-navbar-item:hover {
  color: #c73e6d;
}

.home-navbar .home-navbar-item.active {
  font-weight: 700;
  color: #fa4f6f;
}
.home-navbar .home-navbar-item:hover {
  cursor: pointer;
}
</style>